<template>
  <div id="title">
    <div class="title_item">
      <el-menu default-active="-1" class="el-menu-demo" mode="horizontal">
        <el-menu-item @click="gohome" index="-1">聆听站</el-menu-item>
        <el-submenu :index="strustindex + ''" :key="strustindex" v-for="(str,strustindex) in strust">
          <template slot="title">{{str.type}}</template>
          <el-menu-item @click="gotoArticlesList(item,strustindex*5+k+1)" v-for="(item,k) in str.list" :key="k" :index="strustindex+'-'+k">{{item}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Navigation_bar",
    data () {
      return {
        strust: [
          {
            type: '校园事',
            list: ['暴力欺凌','抑郁压力','宿舍关系','心理问题','诈骗借贷']
          },
          {
            type: '青春期',
            list: ['禁黄赌毒','同性异性','和TA相恋','分开以后','判断PUA']
          },
          {
            type: '云雨时',
            list: ['生理卫生','和他或她','性交相关','安全避孕','疾病了解']
          },
          {
            type: '父母答',
            list: ['家庭问题','儿童侵犯','面对出柜','学业期待','身体心灵']
          },
          {
            type: '专家说',
            list: ['专业指点','权威知识','好帖共享','加精板块','私戳秘密']
          },

        ],
      }
    },
    methods: {
      gotoArticlesList(item,num) {
        this.$router.push('/ArticlesList/'+item+'/'+num)
      },
      gohome (){
        this.$router.push('/home')
      }
    }
  }
</script>

<style scoped>
  .title_item{
    width: 1200px;
    margin: 0 auto;
    height: 45px;
  }
  /deep/ .el-menu-item{
    height: 45px;
    line-height: 45px;
  }
  .el-menu-demo{
    position: absolute;
  }
  /deep/ .el-menu--collapse .el-menu .el-submenu, .el-menu--popup {
    min-width: 100px;
  }
  /deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
    height: 45px;
    line-height: 45px;
  }
  /deep/ .el-submenu__title i{
    display: none;
  }

</style>
